<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<%@ include file="/web/header.jsp"%>
	<title>部门维护</title>
</head>
<body>

	<table id="demo" lay-filter="test"></table>
	
	<!-- 右边工具条 -->
	<script type="text/html" id="toolDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<!-- 头部工具条 -->
	<script type="text/html" id="toolbarDemo">
  		<div class="layui-input-inline" style="width: 200px;">
    		<input type="text" name="name" placeholder="请输入名称" class="layui-input" autocomplete="off"/>    
  		</div>
  		<button class="layui-btn layui-btn-sm" lay-event="selectAll">查询</button>
  		<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
	</script>
	
	<script type="text/javascript">
		var tableDemo=table.render({
			elem: '#demo'
		    ,url: '${path}/guest?method=selectAll' 
		    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
		    ,cols: [[ //表头
		       {type:'numbers', fixed: 'left',title:'序号'}
		      ,{field: 'code', title: '编号'}
		      ,{field: 'name', title: '名称'}
		      ,{field: 'phone', title: '联系电话'}
		      ,{field: 'gender', title: '性别'}
		      ,{field: 'company', title: '公司名'}
		      ,{fixed: 'right',title:'操作', toolbar: '#toolDemo'}
		    ]]
			,id: 'tableReload'
		});
		//事件监听-头工具条
		table.on('toolbar(test)', function(obj){
		  switch(obj.event){
		    case 'add':
		    	layer.open({
					type : 2,
					tile : '添加',
					area : ['600px', '370px'],
					//content : '${path}/web/page/guest/add.jsp'
				    content : '${path}/guest?method=getAddPage'
				});
		    break;
		    case 'selectAll': // 当点击搜索按钮
		      layer.msg('刷新查询');
		      tableDemo.reload({
		        where: {name: $("input[name='name']").val()}//设定异步数据接口的额外参数
		       ,page: {curr: 1} //重新从第 1 页开始
		  	  });
		    break;
		  };
		});
		// 事件监听-行工具条
		table.on('tool(test)', function(obj){
		  var data = obj.data; //获得当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		//   var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
		  // data代表当前这一行对象guest，data.name
		  var code =data.code;
		  switch(layEvent){
		    case 'del': // 点击删除按钮
		      del(code);
		    break;
		    case 'update': // 点击更新按钮
		    	layer.open({
					type : 2,
					tile : '修改',
					area : ['600px', '270px'],
					//content : '${path}/web/page/guestloyee/update.jsp'
					// 因为update.jsp页面需要数据，所以不能直接访问，通过访问后台查出数据转发到这个jsp页面
					content : '${path}/guest?method=getUpdatePage&id=' + data.id
				});
		    break;
		  };
		});
		
		// 添加、删除、更新完之后刷新页面，也就是重新查询一下
		function refresh(){
			$("button[lay-event='sel']").click();
		}
		
		
		function del(code, obj){
			layer.confirm('真的删除行么', function(index){
	          	$.post(
	          		'${path}/guest?method=delete',
	          		{"code" : code},
	          		function(result) {
	          			if(result.success) {
	          				mylayer.successMsg(result.msg);
	          				//重新加载表格数据
	          			    table.reload('tableReload');
	          			} else {
	          				mylayer.errorMsg(result.msg);
	          			}
	          			//layer.close(index);
	          		},
	          		"json"
	          	);
	          });
		}
	</script>
</body>
</html>